<template>
  <div class="app-wrapper-no">
    <div class="container treasure-record">
      <div class="tab-nav">
        <a data-index="0" class="active" href="##">全部</a>
        <a data-index="1" href="##">进行中</a>
        <a data-index="3" href="##">已揭晓</a>
      </div>
      <div class="tab-content mui-slider">
        <div class="mui-slider-group">
          <div class="mui-slider-item">
            <ul class="treasure-lists">
              <li>
                <div class="treasure-block">
                  <div class="goods-wrapper">
                    <img src="../../img/img_indiana_goods.png" alt="">
                  </div>
                  <div class="treasure-detail">
                    <div class="goods-name">小米笔记本Air13.3英寸</div>
                    <div class="goods-date">期号：<span>D2017047YSY0002</span></div>
                    <div class="goods-join">
                      <p>本期参与:<span class="text-blue">100</span>人次</p>
                      <a class="detail" href="./treasure-detail.html">详情 <i class="mui-icon mui-icon-arrowright"></i></a>
                    </div>
                  </div>
                  <div class="result-img">
                    <img src="../../img/icon_lucky_man.png" alt="">
                  </div>
                </div>
                <div class="result-remind">
                  <h4>获奖者：<strong>狂奔**蘑菇</strong> 参与100人次</h4>
                  <button class="blue-btn" onclick="getAward()">领取奖品</button>
                </div>
              </li>
              <li>
                <div class="treasure-block">
                  <div class="goods-wrapper">
                    <img src="../../img/img_indiana_goods.png" alt="">
                  </div>
                  <div class="treasure-detail">
                    <div class="goods-name">小米笔记本Air13.3英寸</div>
                    <div class="goods-date">期号：<span>D2017047YSY0002</span></div>
                    <div class="goods-join">
                      <p>本期参与:<span class="text-blue">100</span>人次</p>
                      <a class="detail" href="./treasure-detail.html">详情 <i class="mui-icon mui-icon-arrowright"></i></a>
                    </div>
                  </div>
                  <div class="result-img">
                    <img src="../../img/icon_lucky_man.png" alt="">
                  </div>
                </div>
                <div class="result-remind">
                  <h4>获奖者：<strong>狂奔**蘑菇</strong> 参与100人次</h4>
                  <button class="blue-btn" onclick="getAward()">领取奖品</button>
                </div>
              </li>
              <li>
                <div class="treasure-block">
                  <div class="goods-wrapper">
                    <img src="../../img/img_indiana_goods.png" alt="">
                  </div>
                  <div class="treasure-detail">
                    <div class="goods-name">小米笔记本Air13.3英寸</div>
                    <div class="goods-date">期号：<span>D2017047YSY0002</span></div>
                    <div class="goods-join">
                      <p>本期参与:<span class="text-blue">100</span>人次</p>
                      <a class="detail" href="./treasure-detail.html">详情 <i class="mui-icon mui-icon-arrowright"></i></a>
                    </div>
                  </div>
                  <div class="result-img">
                    <img src="../../img/icon_lucky_man.png" alt="">
                  </div>
                </div>
                <div class="result-remind">
                  <h4>获奖者：<strong>狂奔**蘑菇</strong> 参与100人次</h4>
                  <button class="blue-btn" onclick="getAward()">领取奖品</button>
                </div>
              </li>
              <li>
                <div class="treasure-block">
                  <div class="goods-wrapper">
                    <img src="../../img/img_indiana_goods.png" alt="">
                  </div>
                  <div class="treasure-detail">
                    <div class="goods-name">小米笔记本Air13.3英寸</div>
                    <div class="goods-date">期号：<span>D2017047YSY0002</span></div>
                    <div class="goods-join">
                      <p>本期参与：<span class="text-blue">100</span>人次</p>
                      <a class="detail" href="./treasure-detail.html">详情 <i class="mui-icon mui-icon-arrowright"></i></a>
                    </div>
                  </div>
                  <div class="result-img">
                  </div>
                </div>
                <div class="result-remind">
                  <h4>获奖者：<strong>糖醋丿排骨</strong> 参与100人次</h4>
                </div>
              </li>
              <li>
                <div class="treasure-block">
                  <div class="goods-wrapper">
                    <img src="../../img/img_indiana_goods.png" alt="">
                  </div>
                  <div class="treasure-detail">
                    <div class="goods-name">小米笔记本Air13.3英寸</div>
                    <div class="goods-date">期号：<span>D2017047YSY0002</span></div>
                    <div class="goods-join">
                      <p>本期参与：<span class="text-blue">100</span>人次</p>
                      <a class="detail" href="./treasure-detail.html">详情 <i class="mui-icon mui-icon-arrowright"></i></a>
                    </div>
                  </div>
                  <div class="result-img">
                  </div>
                </div>
                <div class="doing">
                  <div class="progress2">
                    <span class="progress-bar" style="width: 26%;"></span>
                  </div>
                  <div class="doing-tips">
                    <p class="text-grey">总需人次2000</p>
                    <p>剩余 <span class="text-blue">1300</span>人次</p>
                  </div>
                </div>
              </li>
              <li>
                <div class="treasure-block">
                  <div class="goods-wrapper">
                    <img src="../../img/img_indiana_goods.png" alt="">
                  </div>
                  <div class="treasure-detail">
                    <div class="goods-name">小米笔记本Air13.3英寸</div>
                    <div class="goods-date">期号：<span>D2017047YSY0002</span></div>
                    <div class="goods-join">
                      <p>本期参与:<span class="text-blue">100</span>人次</p>
                      <a class="detail" href="./treasure-detail.html">详情 <i class="mui-icon mui-icon-arrowright"></i></a>
                    </div>
                  </div>
                  <div class="result-img">
                    <img src="../../img/icon_lucky_man.png" alt="">
                  </div>
                </div>
                <div class="result-remind">
                  <h4>获奖者：<strong>糖醋**排骨</strong> 参与100人次</h4>
                  <button class="blue-btn" disabled>已领取</button>
                </div>
              </li>

            </ul>
          </div>
          <div class="mui-slider-item">
            <ul class="treasure-lists ">
              <li>
                <div class="treasure-block">
                  <div class="goods-wrapper">
                    <img src="../../img/img_indiana_goods.png" alt="">
                  </div>
                  <div class="treasure-detail">
                    <div class="goods-name">小米笔记本Air13.3英寸</div>
                    <div class="goods-date">期号：<span>D2017047YSY0002</span></div>
                    <div class="goods-join">
                      <p>本期参与：<span class="text-blue">100</span>人次</p>
                      <a class="detail" href="./treasure-detail.html">详情 <i class="mui-icon mui-icon-arrowright"></i></a>
                    </div>
                  </div>
                  <div class="result-img">
                    <img src="../../img/icon_lucky_man.png" alt="">
                  </div>
                </div>
                <div class="doing">
                  <div class="progress2">
                    <span class="progress-bar" style="width: 26%;"></span>
                  </div>
                  <div class="doing-tips">
                    <p class="text-grey">总需人次2000</p>
                    <p>剩余 <span class="text-blue">1300</span>人次</p>
                  </div>
                </div>
              </li>
              <li>
                <div class="treasure-block">
                  <div class="goods-wrapper">
                    <img src="../../img/img_indiana_goods.png" alt="">
                  </div>
                  <div class="treasure-detail">
                    <div class="goods-name">小米笔记本Air13.3英寸</div>
                    <div class="goods-date">期号：<span>D2017047YSY0002</span></div>
                    <div class="goods-join">
                      <p>本期参与：<span class="text-blue">100</span>人次</p>
                      <a class="detail" href="./treasure-detail.html">详情 <i class="mui-icon mui-icon-arrowright"></i></a>
                    </div>
                  </div>
                  <div class="result-img">
                    <img src="../../img/icon_lucky_man.png" alt="">
                  </div>
                </div>
                <div class="doing">
                  <div class="progress2">
                    <span class="progress-bar" style="width: 26%;"></span>
                  </div>
                  <div class="doing-tips">
                    <p class="text-grey">总需人次2000</p>
                    <p>剩余 <span class="text-blue">1300</span>人次</p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="mui-slider-item">
            <ul class="treasure-lists">
              <li>
                <div class="treasure-block">
                  <div class="goods-wrapper">
                    <img src="../../img/img_indiana_goods.png" alt="">
                  </div>
                  <div class="treasure-detail">
                    <div class="goods-name">小米笔记本Air13.3英寸</div>
                    <div class="goods-date">期号：<span>D2017047YSY0002</span></div>
                    <div class="goods-join">
                      <p>本期参与:<span class="text-blue">100</span>人次</p>
                      <a class="detail" href="./treasure-detail.html">详情 <i class="mui-icon mui-icon-arrowright"></i></a>
                    </div>
                  </div>
                  <div class="result-img">
                    <img src="../../img/icon_lucky_man.png" alt="">
                  </div>
                </div>
                <div class="result-remind">
                  <h4>获奖者：<strong>糖醋**排骨</strong> 参与100人次</h4>
                  <button class="blue-btn" disabled>已领取</button>
                </div>
              </li>
              <li>
                <div class="treasure-block">
                  <div class="goods-wrapper">
                    <img src="../../img/img_indiana_goods.png" alt="">
                  </div>
                  <div class="treasure-detail">
                    <div class="goods-name">小米笔记本Air13.3英寸</div>
                    <div class="goods-date">期号：<span>D2017047YSY0002</span></div>
                    <div class="goods-join">
                      <p>本期参与：<span class="text-blue">100</span>人次</p>
                      <a class="detail" href="./treasure-detail.html">详情 <i class="mui-icon mui-icon-arrowright"></i></a>
                    </div>
                  </div>
                  <div class="result-img">
                  </div>
                </div>
                <div class="result-remind">
                  <h4>获奖者：<strong>糖醋丿排骨</strong> 参与100人次</h4>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="modal">
        <div class="modal-content animated">
          <div class="modal-header">
            <div class="left-title">
              <h4>请填写收货信息</h4>
              <div class="text-red">请填写正确手机号，以便客服能联系到您~</div>
            </div>
            <i class="closeModal mui-icon mui-icon-closeempty"></i>
          </div>
          <div class="modal-body">
            <input class="input-group" type="text" placeholder="请填写您的姓名">
            <input class="input-group" type="text" placeholder="请填写您的联系方式">
            <textarea class="text-group" placeholder="请填写您的收货地址"></textarea>
            <button class="modal-btn">提交信息</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script type="text/ecmascript-6">
    export default {
        name: 'hello',
        data () {
            return {
                msg: '数据'
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .treasure-record{
    .tab-nav{
      display:flex;
      background:#fff;
      position: fixed;
      top:0;
      left:0;
      right:0;
      z-index:99;
      border-bottom:.02rem solid #dedede;
      a{
        flex:1;
        height:1rem;
        line-height:1rem;
        font-size:0.3rem;
        color: #b9b9b9;
        text-align:center;
        &.active{
          position:relative;
          color: #3c6df8;
          &:after{
            content:"";
            display: block;
            height:.04rem;
            width:100%;
            position: absolute;
            background: #3c6df8;
            bottom:0;

          }
        }
      }
    }

    .mui-slider-item{
      padding-top:1.1rem;
      max-height:13.34rem;
      box-sizing:border-box;
      overflow-y:scroll;
    }
    .treasure-lists{
      width:100%;
      li{background:#fff;margin-bottom:.1rem;}
      .treasure-block{
        height:2rem;
        padding:0.3rem;
        display:flex;
        align-items:center;
        justify-content: space-between;
        border-bottom:.02rem solid #DEDEDE;
        img{
          width:100%;
          height:100%;
        }
        .result-img{
          width:1.4rem;
          height:1.4rem;
          overflow:hidden;
          img{
            height:auto;
          }
        }
        .goods-wrapper{
          width:1.4rem;
          height:1.4rem;
          overflow:hidden;
          margin-right:.3rem;
        }
        .treasure-detail{
          width:3.35rem;
        }
        .goods-name{
          color:#333;
          font-size: .3rem;
          font-weight:bold;
          margin-bottom:.2rem;
          width:100%;
          overflow:hidden;
          text-overflow:ellipsis;

        }
        .goods-date{
          color:#3C3C3C;
          font-size:.26rem;
          margin-bottom:.2rem;
          width:100%;
          overflow:hidden;
          text-overflow:ellipsis;
          span{
            color:#6c6c6c;
          }
        }
        .goods-join{
          font-size:.26rem;
          color: #3c3c3c;
          display:flex;
          justify-content: space-between;
          width:100%;
          overflow:hidden;
          text-overflow:ellipsis;
          a.detail{
            color:#3c6df8;
          }
          .mui-icon{
            font-size: 0.3rem;
          }
        }

      }
      .result-remind{
        height:1.08rem;
        display:flex;
        justify-content: space-between;
        align-items:center;
        padding:0 .3rem;
        h4{
          font-size: .3rem;
          color: #3c3c3c;
          strong{
            color:#ED1C24;
          }
        }
        .blue-btn{
          background:#3c6df8;
          width:1.6rem;
          height:.7rem;
          font-size:.3rem;
          color:#fff;
          border:none;
          &:disabled{
            background:#dedede;
          }
        }
      }
      .doing{
        padding:.3rem;
        .doing-tips{
          margin-top:0.2rem;
          display:flex;
          justify-content:space-between;
          font-size:.24rem;
          color:#3c3c3c;
          .text-grey{
            color:#dedede;
          }
        }
      }
    }
    .modal{
      position: fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      z-index: 99;
      background: rgba(0,0,0,0.5);
      display: none;
      .modal-content{
        background: #fff;
        position: absolute;
        bottom:0;
        left:0;
        right:0;
        .modal-header{
          padding:0.11rem 0;
          display:flex;
          justify-content:space-between;
          align-items:center;
          i{color:#ccc;font-size:0.6rem;}
          .left-title{
            padding-left:0.2rem;
            border-left:0.08rem solid #3c6df8;

            h4{
              font-size:0.3rem;
              font-weight:600;
              color:#3C3C3C;
              margin-bottom: 0.1rem;
            }
            .text-red{
              font-size:0.24rem ;
              font-weight: 400;
            }
          }

        }
        .modal-body{
          background: #f5f5f5;
          padding:0.3rem;
          padding-bottom: 0.26rem;
          .input-group{
            display: block;
            width:100%;
            background: #fff;
            height: 0.88rem;
            margin-bottom: 0.1rem;
            font-size:.3rem;
            padding:0.1rem 0.2rem;
            border:none;
            &::placeholder{
              color: #b9b9b9;
            }
          }
          .text-group{
            display: block;
            width:100%;
            height:1.5rem;
            resize: none;
            font-size:.3rem;
            margin-bottom: 0.22rem;
            padding:0.1rem 0.2rem;
            border:none;
            &::placeholder{
              color: #b9b9b9;
            }
          }
        }
        .modal-btn{
          background: #3c6df8;
          width:100%;
          height:0.89rem;
          border-radius:.08rem;
          color:#fff;
          border:none;
          font-size:0.3rem;
        }
      }
    }
  }
</style>
